import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input } from 'antd';
import { useState } from "react";
import { WindowsOutlined, LockOutlined, UserOutlined, WechatOutlined } from '@ant-design/icons';

import "./index.scss";
const Login = () => {
  const navigate = useNavigate();
  const onFinish = (values) => {
    console.log("Success:", values);
    navigate('/home')
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className="loginBox">
      <div className="login">
        <div className="icons">
          <div className="bacBlue">
            <WindowsOutlined style={{ fontSize: '20px', color: '#fff' }} />
          </div>
          <p className="tit">靓仔靓女知识付费运营管理后台</p>
        </div>
        <p className="tit-p">专业数字化管理与用户运营工具，&nbsp;提高知识付费转化率</p>
        <div className="login-box">
          <div className="logintit">
            账号密码登录
          </div>
          <div className="forms">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}

            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Username!',
                  },
                ]}
              >
                <Input prefix={<UserOutlined className="site-form-item-icon" style={{ color: '#0879ff' }} />} placeholder="用户名" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Password!',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" style={{ color: '#0879ff' }} />}
                  type="password"
                  placeholder="密码"
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>自动登录</Checkbox>
                </Form.Item>
                <a className="login-form-forgot forgot" href="">
                  忘记密码？
                </a>
              </Form.Item>
              <Form.Item className="boot">
                <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: '100%', marginBottom: '0' }}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
        <div className="weixin">
          <div className="wei">微信登录</div>
          <div className="wei-icon"><WechatOutlined /></div>
        </div>
      </div>
    </div>
  );
};

export default Login;
